<template>
	<el-container style="height: 100vh;">
		<el-header style="padding: 0 30px 0 0 ;">
			<button class="tt_button"><i class="el-icon-position"></i>&nbsp;燕大科技</button>
			<el-dropdown style="line-height: 6.5; float: right;">
				<span class="el-dropdown-link">
					<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
					</el-avatar>
				</span>
				<el-dropdown-menu slot="dropdown" style="margin-top: -40px;">
					<el-dropdown-item>我 的</el-dropdown-item>
					<el-dropdown-item>
						<hr>
					</el-dropdown-item>
					<el-dropdown-item>退 出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
		<el-container>
			<el-aside style=" width: 250px">
				<el-row class="tac">
					<el-col :span="24">
						<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen"
							@close="handleClose" background-color="Transparent" unique-opened="true" router="true"
							active-text-color="#ffffff">
							<el-menu-item index="sy" class="lv1">
								<template slot="title">
									<i class="el-icon-s-home"></i>
									<span>首页</span>
								</template>
							</el-menu-item>
							<el-submenu index="2">
								<template slot="title" style="height: 100%;">
									<i class="el-icon-document-add"></i>
									<span>挂号预约</span>
								</template>
								<el-menu-item index="yygl" class="lv2" style="font-weight: bold;">
									预约管理
								</el-menu-item>
								<el-menu-item index="xcgh" class="lv2" style="font-weight: bold;">
									现场挂号
								</el-menu-item>
							</el-submenu>
							<el-submenu index="3">
								<template slot="title">
									<i class="el-icon-bank-card"></i>
									<span>收费管理</span>
								</template>
								<el-menu-item index="sf" class="lv2" style="font-weight: bold;">
									收费
								</el-menu-item>
								<el-menu-item index="tf" class="lv2" style="font-weight: bold;">
									退费
								</el-menu-item>
								<el-menu-item index="sfsc" class="lv2" style="font-weight: bold;">
									收费审查
								</el-menu-item>
							</el-submenu>
							<el-submenu index="4">
								<template slot="title">
									<i class="el-icon-notebook-2"></i>
									<span>发票管理</span>
								</template>
								<el-menu-item index="fpdy" class="lv2" style="font-weight: bold;">
									发票打印
								</el-menu-item>
								<el-menu-item index="fpsc" class="lv2" style="font-weight: bold;">
									发票审查
								</el-menu-item>
							</el-submenu>
							<el-submenu index="5">
								<template slot="title">
									<i class="el-icon-first-aid-kit"></i>
									<span>门诊医生</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="hzbl" class="lv2" style="font-weight: bold;">
										患者病历
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>

							<el-submenu index="6">
								<template slot="title">
									<i class="el-icon-menu"></i>
									<span>系统管理</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="pbgl" class="lv2" style="font-weight: bold;">
										排班管理
									</el-menu-item>
									<el-menu-item index="ksgl" class="lv2" style="font-weight: bold;">
										科室管理
									</el-menu-item>
									<el-menu-item index="ysgl" class="lv2" style="font-weight: bold;">
										医生管理
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>

						</el-menu>
					</el-col>
				</el-row>
			</el-aside>

			<el-main id="main">
				<el-row>
					<router-view></router-view>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
</template>
<script src="../../publicMethods/http.js"></script>
<script>
	export default {
		data() {
			return {
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
				sizeList: ["large", "medium", "small"]
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	* {

		padding: 0px;
		text-decoration: none;
		list-style: none;
	}

	/deep/.el-submenu__title:hover {
		 // border-right: #64DFDF solid 6px !important;
		background-color: #4EA8DE !important;

		i {
			color: #FFFFFF;
		}
	}

	/deep/.el-submenu__title {
		margin: 5px 15px;
		border-radius: 50px 50px !important;
		height: 50px;
		line-height: 50px;

		i {
			font-size: 19px;
			font-weight: bold;
		}
		span {
			font-size: 19px;
			font-weight: bold;
			font-family: "宋体";
			color: #FFFFFF;
		}
	}

	.lv1 {
		margin: 5px 15px;
		border-radius: 50px 50px !important;
		height: 50px;
		line-height: 50px;
		font-size: 19px;
		font-family: "宋体";
		font-weight: bold;
		color: #FFFFFF;
	}

	.lv1:hover {
		// border-right: #64DFDF solid 6px !;
		background-color: #4EA8DE !important;

		i {
			color: #FFFFFF;
		}
	}

	.lv2 {
		text-align: center;
		font-size: 17px;
		font-family: "宋体";
		color: #DEE2E6;
		margin: 0 35px 0 35px;
		min-width: 0 !important;
		border-radius: 5px 5px !important;
		background-color: rgba(31, 72, 126, 0.3) !important;
	}

	.lv2:hover {
		border-right: #4EA8DE solid 6px !important;
		background-color: #E9ECEF !important;
		color: #1D3461;
	}

	.el-header {
		background-color: #4370A3;
		// 4370A3
		color: black;
		line-height: 60px;
		border-bottom: solid 2px #E9ECEF;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}

	.tt_button {
		border-radius: 0 15px 0 0 !important;
		cursor: pointer;
		background-color: #376996;
		width: 250px;
		height: 100%;
		color: #FFFFFF;
		float: left;
		margin-left: 0px;
		border: 0;
		font-size: 22px;
		font-weight: bold;
	}

	.el-aside {
		color: white;
		height: 100vh;
		background: #376996;
	}

	.el-menu-item.is-active {
		border-right: #4EA8DE solid 6px !important;
		background-color: #1D3461 !important;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}


	/deep/.el-submenu__title i {
		color: #FFFFFF;
	}

	.el-menu-item i {
		color: #FFFFFF;
	}


	.bgq>.el-col {
		color: white;
		background-color: #409EFF;
		line-height: 80px;
		width: 100px;
		border-radius: 10px;
	}

	.tac {
		height: 500px;
		width: 100%;
		text-align: left;
	}

	#main {
		padding: 0;
	}
</style>
